//scss是完全向下兼容css的
@import './modules/base.scss';
@import './modules/header.scss';
@import './modules/footer.scss';

section {
    // 轮播部分
    .swiper-container {
        
        height: 439px;
        img {
            height: 439px;
            width: 100%;
        }
    }
    // 底部菜单
    .menu-bottom {
        padding-top: 190px;
        padding-bottom: 190px;
        display: flex;
        justify-content: space-around;
        
        li {
            
            a {
                display: block;
                width: 253px;
                height: 503px;
                box-sizing: border-box;

                color: #000000;
                img {
                    width: 253px;
                    height: 253px;
                    
                    padding-bottom: 15px;
                }
                .item-title {
                    font-weight: bolder;
                    font-size: 16px;
                }
                .item-desc {
                    height: 66px;
                    font-size: 16px;
                    margin-top: 10px;
                    box-sizing: border-box;

                }
                .item-link {
                    font-size: 14px;
                    margin: 60px 0;
                    box-sizing: border-box;
                    text-decoration: underline;
                    &:hover {
                        color: red;
                    }
                }
            }
            
        }
    }
    .product{
        padding-top: 40px;
            .newProduct{
                height: 889px;
                display: flex;
                justify-content: space-around;
                img {
                    width: 393px;
                    height: 697px;
                    padding-bottom: 15px;
                }
                .type-title {
                    font-size: 16px;
                    font-weight: bolder;
                    margin: 15px 0;
                }
                .type-desc {
                    font-size: 16px;
                    margin: 15px 0;
                }

            }       
        }
}




















// h1 {
//     height: 100px;
//     color: burlywood;
// }
// div {
//     display: flex;
// }
// .container {
//     width: 1200px;

// }
// .container .box {
//     width: 1000px / 1200px * 100%;
// }

// //变量
// $mainColor:#000;
// div {
//     background-color: $mainColor;
// }

// //复杂变量
// $margin: 20px 30px;
// $padding: (20px 30px) (10px 20px 30px);
// .box  {
//     margin: $margin;
//     padding-top: nth($margin, 1 );
// }

// //变量作为属性名或者选择器来使用
// $pos:top;
// .header-#{$pos} {
//     border-#{$pos}:1px solid #000000;
// }

// $headers: (h1:20px,h2:30px,h3:90px);
// @each $key,$value in $headers {
//     #{$key} {
//         font-size: $value;
//     }   
// }

// .header {
//     height :110px;
//     .logo {
//         height: 100px;
//         }
// } 

// //选择器嵌套
// .main {
//     width: 100px;
//     &-top{
//         width: 100px;
//     }
// }

// //属性名嵌套
// footer {
//     margin: {
//         top:100px;
        
//     }
// }